<template>
  <h3>child</h3>
  <p>count={{ count }}------------str={{ str }}----------msg默认值={{ msg }}</p>
</template>
<script setup lang='ts'>
import { ref, reactive } from "vue";
// defineProps(['count'])
//类型校验 - 之前写的 js写法
// defineProps({
//     count:{
//         type:Number,
//         default:0
//     }
// })
//props结合ts
// defineProps<{
//   count: number;
//   str?: string;
// }>();
//或者
// interface Props {
//   count: number,
//   str?: string,
//   msg?:string,
// }
// defineProps<Props>();
 
interface Props {
  count: number,
  str?: string,
  msg?:string,
}
//带有默认值 withDefaults('defineProps',{默认值})
// const props = withDefaults(defineProps<Props>(),{
//     str:"默认值",
//     msg:"msg默认值"
// })
// console.log(props);
// console.log("props.msg=====",props.msg); 


//解构来指定默认值 - 有问题
const { count, str = "小黄车" ,msg="msg默认值"} = defineProps<Props>();
console.log("count=",count);
console.log("str=",str);
console.log("msg=",msg);

// const { count, str = "小黄车",msg = "msg默认值" } = defineProps<{
//   count: number;
//   str?: string;
//   msg?:string
// }>();

//MyRef 引入了child作为子组件，MyRef里面定义了ref,获取子组件的实例
//在这里需要暴露出来
const myRefChild = ()=>{
  alert("myref获取子组件里面的实例")
}
defineExpose({
  myRefChild
})
</script>
<style scoped lang='scss'>
</style>